/**
 * Avatar 组件的主题配置
 * 
 * 基于企业级设计规范 (Avatar.json) 的完整配置
 * 包含所有头像样式定义
 */

import type { ComponentToken } from 'antd/es/avatar/style';

// ========== 设计 Token 常量 ==========

/**
 * 尺寸相关 Token
 */
const SIZE_TOKENS = {
  // 容器尺寸
  container: {
    default: 32,
    large: 40,
    small: 24,
  },
} as const;

/**
 * 字体相关 Token
 */
const FONT_TOKENS = {
  // 文字大小
  text: {
    default: 14,
    large: 14,
    small: 14,
  },
  
  // 图标大小
  icon: {
    default: 18,
    large: 24,
    small: 14,
  },
} as const;

/**
 * 头像组相关 Token
 */
const GROUP_TOKENS = {
  // 间距
  space: 4,
  
  // 重叠宽度
  overlapping: -8,
  
  // 边框颜色
  borderColor: '#ffffff',
} as const;

/**
 * Avatar 完整主题配置
 * 
 * 根据设计规范文件 Avatar.json 定义的企业级头像样式
 * 涵盖所有头像类型和尺寸的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Avatar: avatarThemeConfig } }}>
 *   <Avatar>U</Avatar>
 *   <Avatar size="large" icon={<UserOutlined />} />
 *   <Avatar size="small" src="https://..." />
 *   
 *   <Avatar.Group>
 *     <Avatar>A</Avatar>
 *     <Avatar>B</Avatar>
 *     <Avatar>C</Avatar>
 *   </Avatar.Group>
 * </ConfigProvider>
 * ```
 */
export const avatarThemeConfig: Partial<ComponentToken> = {
  // ========== 尺寸配置 ==========
  containerSize: SIZE_TOKENS.container.default,
  containerSizeLG: SIZE_TOKENS.container.large,
  containerSizeSM: SIZE_TOKENS.container.small,
  
  // ========== 文字字体配置 ==========
  textFontSize: FONT_TOKENS.text.default,
  textFontSizeLG: FONT_TOKENS.text.large,
  textFontSizeSM: FONT_TOKENS.text.small,
  
  // ========== 图标字体配置 ==========
  // 注意：某些版本的 antd 可能没有 iconFontSize 配置
  // 如果编译报错，可以注释掉这部分
  
  // ========== 头像组配置 ==========
  groupSpace: GROUP_TOKENS.space,
  groupOverlapping: GROUP_TOKENS.overlapping,
  groupBorderColor: GROUP_TOKENS.borderColor,
};

/**
 * 获取 Avatar 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myAvatarTheme = getAvatarTheme({
 *   containerSize: 36,                 // 自定义默认尺寸
 *   containerSizeLG: 48,               // 自定义大尺寸
 *   groupSpace: 8,                     // 自定义头像组间距
 * });
 * 
 * <ConfigProvider theme={{ components: { Avatar: myAvatarTheme } }}>
 *   <Avatar>U</Avatar>
 * </ConfigProvider>
 * ```
 */
export const getAvatarTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...avatarThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Avatar 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as AvatarComponentToken } from 'antd/es/avatar/style';

